<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="width: 334px;">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="类型" prop="pettype">
      <el-select v-model="form.pettype" placeholder="请选择">
        <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="种类" prop="species">
      <el-select v-model="form.species" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="颜色" prop="color">
      <el-select v-model="form.color" placeholder="请选择">
        <el-option
          v-for="item in optionC"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="日期" prop="birth">
      <div class="block">
        <el-date-picker v-model="form.birth" type="date" placeholder="选择日期"></el-date-picker>
      </div>
      <!-- <el-input v-model="form.birth"></el-input> -->
    </el-form-item>
    <el-form-item label="性格" prop="character">
      <el-select v-model="form.character" placeholder="请选择">
        <el-option
          v-for="item in optionX"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click.prevent="onSubmit('form')">立即创建</el-button>
      <el-button @click="returm">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: ["Chong"],
  data() {
    return {
      option: [
        {
          value: "哺乳类",
          label: "哺乳类"
        },
        {
          value: "鸟类",
          label: "鸟类"
        },
        {
          value: "鱼类",
          label: "鱼类"
        }
      ],
      options: [
        {
          value: "猫或者其他",
          label: "猫或者其他"
        },
        {
          value: "水生或者其他",
          label: "水生或者其他"
        },
        {
          value: "飞禽或者其他",
          label: "飞禽或者其他"
        }
      ],
      optionC: [
        {
          value: "橘色",
          label: "橘色"
        },
        {
          value: "粉色",
          label: "粉色"
        },
        {
          value: "其他",
          label: "其他"
        }
      ],
      optionX: [
        {
          value: "活泼",
          label: "活泼"
        },
        {
          value: "内向",
          label: "内向"
        },
        {
          value: "温柔",
          label: "温柔"
        }
      ],
      form: {
        name: "",
        pettype: "",
        species: "",
        color: "",
        birth: "",
        character: ""
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        pettype: [{ required: true, message: "请输入类型", trigger: "blur" }],
        species: [{ required: true, message: "请输入种类", trigger: "blur" }],
        color: [{ required: true, message: "请输入颜色", trigger: "blur" }],
        birth: [{ required: true, message: "请输入日期", trigger: "blur" }],
        character: [{ required: true, message: "请输入性格", trigger: "blur" }]
      }
    };
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit("submit", this.form);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    returm() {
      this.$message({
        type: "success",
        message: "返回成功",
        onClose: () => {
          if (this.Chong) {
            this.$router.push({
              name: "查看宠物",
              params: {
                id: this.Chong.rid
              }
            });
          } else {
            this.$router.push({
              name: "查看宠物"
            });
          }
        }
      });
    }
  },
  mounted() {
    if (this.Chong) {
      this.form = {
        name: this.Chong.name,
        pettype: this.Chong.pettype,
        species: this.Chong.species,
        color: this.Chong.color,
        birth: this.Chong.birth,
        character: this.Chong.character
      };
    }
  },
  watch: {
    Chong: function() {
      if (this.Chong) {
        this.form = {
          name: this.Chong.name,
          pettype: this.Chong.pettype,
          species: this.Chong.species,
          color: this.Chong.color,
          birth: this.Chong.birth,
          character: this.Chong.character
        };
      }
    }
  }
};
</script>